<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    11
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" defer></script>
    <script defer>
        // 下载图片
        function downloadImage(dataUrl, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = dataUrl;
            link.click();
        }

        // 截取整个页面
        async function captureFullPage() {
            const canvas = await html2canvas(document.documentElement, {
                useCORS: true,        // 跨域图片支持
                allowTaint: true,     // 允许跨域污染
                logging: false,       // 关闭调试日志
                scale: 2              // 提高清晰度
            });
            const image = canvas.toDataURL('image/png');
            downloadImage(image, 'fullpage.png');
        }

        window.addEventListener('load', captureFullPage);
        /**
            获取每个 DOM 元素的 样式、位置、内容
            自己用 fillRect、fillText、drawImage 绘制到 Canvas
        */
        /**
         易用性：

            简单的API，只需几行代码即可实现截图功能

            无需服务器端处理，纯前端解决方案

        灵活性：

            可以截取页面任意DOM元素，而不仅是可见区域

            支持自定义截图范围、缩放比例和输出质量

        兼容性：

            支持大多数现代浏览器（Chrome、Firefox、Safari、Edge等）

            对旧版浏览器也有较好的降级处理

        功能丰富：

            支持CSS3特性（如阴影、渐变、圆角等）

            可以处理SVG、Canvas等复杂元素

            允许添加自定义背景和过滤效果



        渲染不完全准确：

            某些CSS属性可能无法完美呈现（如position: fixed的元素）

            复杂的布局有时会出现错位或样式丢失

        性能问题：

            处理大页面或复杂DOM结构时速度较慢

            可能导致内存占用过高，特别是在移动设备上

        跨域限制：

            无法正确渲染跨域图片（除非服务器设置CORS头）

            无法捕获iframe内容（同源策略限制）

        字体问题：

            自定义字体可能无法正确渲染

            系统字体在不同平台上表现可能不一致

        不支持所有CSS特性：

            不支持box-shadow的扩散半径

            某些CSS滤镜效果可能无法呈现

            伪元素(:before, :after)有时渲染不正确

         输出质量限制：

            生成的图片可能有锯齿

            高DPI设备上可能需要额外处理才能获得清晰图像


        html2canvas最适合用于：

                生成页面预览或缩略图

                创建用户可下载的内容（如证书、报告）

                不需要像素级精确的截图需求

                中小型页面的截图功能
        */
    </script>
</body>
</html>